<template>
    <div class="tab-container">
      <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o" @click="jump1">首页</van-tabbar-item>
        <van-tabbar-item icon="search" @click="jump2">分类</van-tabbar-item>
        <van-tabbar-item icon="friends-o" @click="jump3">购物车</van-tabbar-item>
        <van-tabbar-item icon="setting-o" @click="jump4">个人</van-tabbar-item>
      </van-tabbar>
    </div>
</template>
<script>
export default {
  name: 'Tab',
  data () {
    return {
      active: 0
    }
  },
  methods: {
    jump1 () {
      if (!this.$route.path.includes('/home')) {
        this.$router.push('/home')
      }
    },
    jump2 () {
      if (!this.$route.path.includes('/class')) {
        this.$router.push('/class')
      }
    },
    jump3 () {
      if (!this.$route.path.includes('/shop')) {
        this.$router.push('/shop')
      }
    },
    jump4 () {
      if (!this.$route.path.includes('/mine')) {
        this.$router.push('/mine')
      }
    }
  },
  created () {
    console.log(this.$route.path)
  }
}
</script>

<style scoped lang="less">
.tab-container{
  width: 100%;
  background: #FFFFFF;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  z-index: 999;
  border-top: 1px solid #CCCCCC;
}
  .van-tabbar{
    border-top: 1px solid #CCCCCC;
  }
</style>
